<!-- 项目审批 -->
<template>
	<view >
		<mescroll-uni :down="downOption" @emptyclick="downCallback" @down="downCallback" :up="upOption" @up="upCallback"
		 :fixed="true">
			<view class="mycard">
				<view v-for="item in cardList" :key="item.id" class="card-item">
					<uni-card is-full title="盘库" is-shadow note="true" :extra="formatDate(item.dat)" thumbnail="/static/img/db.svg">
						<view class="audit-card-content">
							<view class="uni-flex uni-row">
								<view class="flex-item-20">盘点单号</view>
								<view class="flex-item-80">{{item.id}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">申请人</view>
								<view class="flex-item-80">{{item.oper}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">申请时间</view>
								<view class="flex-item-80">{{formatDate(item.qtyChkDat)}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">记账人</view>
								<view class="flex-item-80">{{item.confirmOper}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">记账时间</view>
								<view class="flex-item-80">{{formatDate(item.confirmDat)}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">状态</view>
								<view class="flex-item-80">{{item.status}}</view>
							</view>
							<view class="uni-flex uni-row">
								<view class="flex-item-20">备注</view>
								<view class="flex-item-80">{{item.remark}}</view>
							</view>
						</view>

						<template v-slot:footer>
							<view class="footer-box">
								<view class="text-blue" ></view>
								<view v-if="false" class="cuIcon-camera text-olive" @tap="photoClick(item)">拍照</view>
								<view class="cuIcon-form text-blue" @tap="detailClick(item)">数据录入</view>
							</view>
						</template>
					</uni-card>
				</view>
			</view>
		</mescroll-uni>
	</view>
</template>

<script>
	import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue"
	import uniCard from "@/components/uni-card/uni-card"
	import uniTag from '@/components/uni-tag/uni-tag.vue'
	import uniIcons from '@/components/uni-icons/uni-icons.vue'

	import { mapGetters } from 'vuex'
	import {
		getRandomArrayElements,
		filePreview,
		formatStatus
	} from '@/utils/index.js'
	import { formatDate } from '@/utils/datetime.js'
	export default {
		props: {
			currId: {
				type: String,
				required: false
			}
		},
		components: {
			MescrollUni,
			uniCard,
			uniTag,
			uniIcons
		},
		computed: mapGetters(['user']),
		data() {
			return {
				mescroll: null,
				isPass: false,
				selectedProject: {},
				// 下拉刷新的常用配置
				downOption: {
					use: true, // 是否启用下拉刷新; 默认true
					auto: true, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
				},
				// 上拉加载的常用配置
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					page: {
						num: 1, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 5, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					empty: {
						tip: '暂无相关数据'
					},
					toTop: {
						src: '/static/img/backtop.png'
					},
					textNoMore: '暂无相关数据'
				},
				// 列表数据
				cardList: [],
				datas: []
			}
		},
		methods: {
			filePreview,
			formatStatus,
			formatDate,
			// mescroll组件初始化的回调,可获取到mescroll对象
			mescrollInit(mescroll) {
				// 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
				//this.mescroll = mescroll
			},
			/*下拉刷新的回调, 有三种处理方式: */
			downCallback(mescroll) {
				// 第2种: 下拉刷新和上拉加载调同样的接口, 那以上请求可删, 直接用mescroll.resetUpScroll()代替
				mescroll.resetUpScroll() // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
			},
			/*上拉加载的回调*/
			upCallback(mescroll) {

				/**
				 * todo: api请求分页查询项目待办
				 */
				
					const inToDoListParams = {
						status: '提交'
					}
					this.$minApi.getQtyChkTodoList(inToDoListParams).then(res => {
						const data = res
						if (data) {
							this.cardList = data
							this.datas = data
						}
						
						// 成功隐藏下拉加载状态
						// 方法一(推荐): 后台接口有返回列表的总页数 totalPage
						let totalPage = data ? data.length : 0
						let currLength = data ? data.length : 0
						if (totalPage === 0) {
							mescroll.showEmpty()
						} else {
							mescroll.endByPage(currLength, totalPage)
							this.$nextTick(() => {
								mescroll.endSuccess(currLength)
							})	
						}
						
						if(this.currId&&Number(this.currId)>0){
							this.queryByName(this.currId)
							this.$emit('goodsCurrIdClear')							
						}
						
					}).catch(err => {
						console.log(err)
					}).finally(() => {
						mescroll.endErr()
					})

			},
			detailClick(item) {
				uni.redirectTo({
					url: '/pages/todo/qtyChk/detail?id=' + item.id
				})
			},
			photoClick(item) {
				uni.redirectTo({
					url: '/pages/todo/qtyChk/photo?qtyChkId=' + item.id
				})
			},
			queryByName(name) {
				if (name) {
					
					this.cardList = this.datas.filter(f => f.id === Number(name))
				} else {
					this.cardList = this.datas
				}
				
			},
			updateQuery() {
				// 无效
				// if (this.mescroll !== null) {
				// 	this.downCallback(this.mescroll)
				// }
				this.queryByName('')
			}
		}
	}
</script>

<style>
	.mescroll-totop {
		opacity: 1 !important;
	}
</style>
